<!-- eslint-disable no-console -->
<script lang="ts" setup>
// import type { VxeFormListeners, VxeFormProps } from '@vben/plugins/vxe-table';

import type { QcindexApi } from '#/api';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

// import { VxeUI } from '@vben/plugins/vxe-table';
import { useVbenForm } from '#/adapter/form';
import { addQcindex, getQcindexCode, updateQcindex } from '#/api';

const emit = defineEmits(['success']);

const formdata = ref<QcindexApi.Row>();
const mes_index_type = ref();
const mes_qc_result_type = ref();

const [Modal, modalApi] = useVbenModal({
  closeOnClickModal: false,
  async onConfirm() {
    const { valid } = await baseFormApi.validate();
    if (valid) {
      modalApi.lock();

      let data;
      await baseFormApi.getValues().then((res) => {
        console.log(res);
        data = res;
      });
      try {
        await (formdata.value?.indexId
          ? updateQcindex(data!)
          : addQcindex(data!));
        modalApi.close();
        emit('success');
      } finally {
        modalApi.lock(false);
      }
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData();
      if (data) {
        formdata.value = data.row;
        console.log(formdata.value);
        baseFormApi.setValues(formdata.value as any);
        mes_index_type.value = data.mes_index_type;
        mes_qc_result_type.value = data.mes_qc_result_type;
        // sexItemRender.options = mes_qc_result_type.value;
      }
    }
  },
});
const switchValue = ref('');
const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  // 所有表单项共用，可单独在表单内覆盖
  resetButtonOptions: {
    show: false,
  },
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['indexId'],
      },
      fieldName: 'indexId',
      label: 'Id',
    },
    {
      component: 'Input',
      rules: 'required',
      formItemClass: 'col-span-4',
      componentProps: {
        placeholder: '请输入检测项编码',
      },
      // 字段名
      fieldName: 'indexCode',
      // 界面显示的label
      label: '检测项编码',
      dependencies: {
        triggerFields: ['switch'],
        trigger(values) {
          values.indexCode = switchValue;
        },
      },
    },
    {
      component: 'Switch',
      fieldName: 'switch',
      label: '自动生成',
      formItemClass: 'col-start-5 col-span-2',
      labelWidth: 95,
      componentProps: {
        defaultValue: 0,
        onChange: (e: boolean) => {
          if (e) {
            getQcindexCode().then((res) => {
              console.log(res);
              switchValue.value = res.data;
            });
          } else {
            switchValue.value = '';
          }
        },
      },
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入检测项名称',
      },
      fieldName: 'indexName',
      label: '检测项名称',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Select',
      rules: 'required',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: mes_index_type,
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'indexType',
      label: '检测项类型',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入检测工具',
      },
      fieldName: 'qcTool',
      label: '检测工具',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Select',
      rules: 'required',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: mes_qc_result_type,
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'qcResultType',
      label: '检测值类型',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入内容',
      },
      formItemClass: 'col-span-12',
      fieldName: 'remark',
      label: '备注',
    },
  ],
  wrapperClass: 'grid grid-cols-12',
});

function onSubmit(values: Record<string, any>) {
  console.log(values);

  modalApi.close();
}
</script>
<template>
  <Modal class="w-4/6">
    <!-- <VxeForm v-bind="formOptions" v-on="formEvents" /> -->
    <BaseForm />
  </Modal>
</template>
